<template>
  <div>
    <el-form ref="ruleForm" :model="ruleForm">
      <div class="l-addrygl">
        <!-- <h2>基本信息</h2> -->
        <!-- 返回 -->
        <div class="l-addrygl-1">
          <div></div>
          <div class="l-addrygl-back" @click="back()">返回</div>
          <div class="head-span">新增人员</div>
        </div>
        <!-- 单位信息 -->
        <div class="l-addrygl-2">
          <div class="l-addrygl-2-1">单位信息</div>
          <!-- input框 -->
          <div class="l-addrygl-2-2">
            <!-- 第一行 -->
            <el-row>
              <el-col :span="6">
                <el-form-item prop="people_status">
                  <div>举办单位</div>
                  <el-select
                    v-model="ruleForm.buildCompany.company_name"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in linput1"
                      :key="item.company_id"
                      :label="item.company_name"
                      :value="item.company_id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item prop="company_id">
                  <div>培训等级ID</div>
                  <el-select v-model="ruleForm.level_id" placeholder="请选择">
                    <el-option
                      v-for="item in linput3"
                      :key="item.level_id"
                      :label="item.level_name"
                      :value="item.level_id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item prop="company_id">
                  <div>演练/培训种类</div>
                  <el-select v-model="ruleForm.type_id" placeholder="请选择">
                    <el-option
                      v-for="item in linput2"
                      :key="item.type_id"
                      :label="item.type_name"
                      :value="item.type_id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item prop="people_cardstart">
                  <span>开始时间</span>
                  <div>
                    <el-date-picker
                      format="yyyy 年 MM 月 dd 日"
                      value-format="yyyy-MM-dd"
                      v-model="ruleForm.train_start"
                      type="date"
                      placeholder="选择日期"
                    ></el-date-picker>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 第二行 -->
            <el-row>
              <el-col :span="6">
                <el-form-item prop="people_cardstart">
                  <span>开始时间</span>
                  <div>
                    <el-date-picker
                      format="yyyy 年 MM 月 dd 日"
                      value-format="yyyy-MM-dd"
                      v-model="ruleForm.train_end"
                      type="date"
                      placeholder="选择日期"
                    ></el-date-picker>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="培训标题" prop="people_age">
                  <el-input v-model="ruleForm.train_title"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <!--textarea  -->
            <div class="textarea1">
              <el-col class="textarea1" :span="20">
                <el-form-item label="演练/培训内容" prop="people_age">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 3, maxRows: 8 }"
                    placeholder="演练/培训内容"
                    v-model="ruleForm.train_text"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </div>
            <!--textarea  -->
            <div class="textarea1">
              <el-col :span="20">
                <el-form-item label="备注" prop="people_age">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 3, maxRows: 8 }"
                    placeholder="备注"
                    v-model="ruleForm.train_remark"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </div>
            <!-- <el-row>
              <el-col :span="6">
                <el-form-item prop="DanWeiName">
                  <div>附件</div>
                  <el-button type="primary">上传附件</el-button>
                </el-form-item>
              </el-col>
            </el-row> -->
            <!-- 表格1 -->
            <!-- <div class="l-chuan-table">
              <el-table
                ref="singleTable"
                :data="tableDatanull"
                highlight-current-row
                @current-change="handleCurrentChange"
                :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
                style="width: 100%"
              >
                <el-table-column align="center" type="index" width="50">
                </el-table-column>
                <el-table-column
                  align="center"
                  property="date"
                  label="文件名"
                  width="120"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  property="name"
                  label="文件大小"
                  width="120"
                >
                </el-table-column>
                <el-table-column property="do" label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button type="text" @click="del(scope.$index, scope.row)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div> -->
          </div>
        </div>
        <!-- 培训人员 -->
        <div class="l-addrygl-3">
          <div class="l-addrygl-3-1">
            <div class="l-addrygl-3-1-left">培训人员</div>
            <div class="l-addrygl-3-1-right" @click="GZadd()">添加</div>
          </div>
          <!-- 培训人员表格 -->
          <div class="pei-edit-table">
            <el-table
              ref="singleTable"
              :data="currList"
              highlight-current-row
              @current-change="handleCurrentChange"
              :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
              style="width: 100%"
            >
              <el-table-column align="center" type="index" width="50">
              </el-table-column>
              <el-table-column
                align="center"
                property="buildCompany.company_name"
                label="单位"
                width="120"
              >
              </el-table-column>
              <el-table-column
                align="center"
                property="buildPeople.people_name"
                label="姓名"
                width="120"
              >
              </el-table-column>
              <el-table-column
                align="center"
                property="buildPeople.people_cardid"
                label="身份证号码"
              >
              </el-table-column>
              <el-table-column
                align="center"
                property="buildPeople.buildJob.job_name"
                label="人员类型"
              >
              </el-table-column>
              <el-table-column align="center" label="成绩">
                <template slot-scope="scope">
                  <el-input
                   class="input-padding"
                    @change="inputchange(scope.$index, scope.row)"
                    v-model="scope.row.manage_score"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" label="是否合格">
                <template slot-scope="scope">
                  <el-select
                   class="select-padding"
                    @change="selectchange(scope.$index, scope.row)"
                    v-model="scope.row.manage_status"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                      ></el-option
                    >
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column property="do" label="操作" align="center">
                <template slot-scope="scope">
                  <el-button type="text" @click="del(scope.$index, scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="l-fen">
            <div class="f-fenye">
              <el-pagination
                background
                layout="prev, pager, next"
                :total="tableData.length"
                :page-size="pageSize"
                @current-change="changePage"
              ></el-pagination>
            </div>
          </div>
        </div>

        <!-- 模态框 -->
        <el-dialog title="选择人员" :visible.sync="dialogFormVisible">
          <div class="dialog">
            <div class="dialog-left">
              <el-table
                ref="multipleTable"
                :data="tableData1"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" width="55"></el-table-column>
                <!-- <el-table-column label="日期" width="120">
                  <template slot-scope="scope">{{ scope.row.date }}</template>
                </el-table-column> -->
                <el-table-column
                  prop="people_name"
                  label="姓名"
                  width="120"
                ></el-table-column>
                <!-- <el-table-column prop="people_tele" label="电话" show-overflow-tooltip></el-table-column> -->
              </el-table>
            </div>
            <div class="dialog-right">
              <div>已选人员 {{ this.multipleSelection.length }}</div>
              <el-table
                ref="multipleTable"
                :data="multipleSelection"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <!-- <el-table-column type="selection" width="55"></el-table-column> -->
                <!-- <el-table-column label="日期" width="120">
                  <template slot-scope="scope">{{ scope.row.date }}</template>
                </el-table-column> -->
                <el-table-column
                  prop="people_name"
                  label="姓名"
                  width="120"
                ></el-table-column>
                <el-table-column
                  prop="buildCompany.company_name"
                  label="公司"
                  show-overflow-tooltip
                ></el-table-column>
              </el-table>
            </div>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="motaikuang()">确 定</el-button>
          </div>
        </el-dialog>
      </div>

      <div class="l-addrygl-5">
        <div class="l-tijiao">
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >提交</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </div>
      </div>
    </el-form>
  </div>
</template>
<script>
import http from "../api";
import axios from "axios";
export default {
  data() {
    // var validateusername = (rule, value, callback) => {
    //   var reg = /^[a-zA-Z]\w{3,7}/;
    //   if (!reg.test(value)) {
    //     callback(new Error("请输入用户名"));
    //   } else {
    //     callback();
    //   }
    // };
    return {
      currPage: 1, //当前页
      currList: [], //当前展示的数据数组
      pageSize: 2,
      dialogTableVisible: false,
      dialogFormVisible: false,
      multipleSelection: [],
      form: {}, //模态框input value值
      formLabelWidth: "120px",
      linput1: "", //举办单位
      linput2: "", //培训种类
      linput3: "", //培训等级ID
      // 是否合格
      options: [
        {
          value: 0,
          label: "是",
        },
        {
          value: 1,
          label: "否",
        },
      ],
      options1: [
        {
          value: 0,
          label: "待入场",
        },
        {
          value: 1,
          label: "入场",
        },
        {
          value: 2,
          label: "离场",
        },
      ],
      tableDatanull: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      tableData1: [],
      tableData: [],
      newarr: [],
      currentRow: null,
      ruleForm: this.$route.params,
      // scores:[],
      // status: [],
      // updPeopleIds: [],
      // newPeopleIds: [],

      // 表单验证规则
      // rules: {
      //   people_id: [{ required: true, message: "请输入工号", trigger: "blur" }],
      //   people_name: [{ required: true, message: "请输入姓名", trigger: "blur"}],
      //   job_id:[{ required: true, message: "请选择管理人员职务类型", trigger: "change"}],
      //   company_id:[{ required: true, message: "请输入单位名称", trigger: "blur"}],
      //   people_tele:[{ required: true, message: "请输入联系电话", trigger: "blur"}],
      //    people_addr:[{ required: true, message: "请输入户籍地址", trigger: "blur"}],
      //   people_status:[{ required: true, message: "请选择人员状态", trigger: "change"}],
      //    people_age:[{ required: true, message: "请输入年龄", trigger: "blur"}],
      //    people_member:[{ required: true, message: "请选择是否为党员", trigger: "change"}],
      //    people_cardstart:[{ required: true, message: "请选择是否为党员", trigger: "change"}],
      //    people_cardend:[{ required: true, message: "请选择日期", trigger: "change"}],
      //      people_nation:[{ required: true, message: "请输入民族", trigger: "change"}],
      //      people_sex:[{ required: true, message: "请选择性别", trigger: "change"}],
      //      people_give:[{ required: true, message: "请选择设备", trigger: "change"}],
      //     people_cardid:[{ required: true, message: "请输入身份证号码", trigger: "change"}],
      //   people_started:[{ required: true, message: "请输入入场时间", trigger: "change"}],
      //   //  DanWeiName: [{ validator: validateDanWeiName, trigger: 'blur' }],
      //   // username: [{ validator: validateusername, trigger: "blur" }],
      //   // idcard: [{ validator: validateidcard, trigger: 'blur' }],
      //   // gonghao: [{ validator: validategonghao, trigger: 'blur' }],
      // },
    };
  },
  methods: {
    // input成绩问题
    inputchange(index, row) {
      // this.scores.unshift(row.manage_score)
      // console.log('this.scores',this.scores)
      // console.log("row.manage_score", row.manage_score);
    },
    // selecr是否合格问题
    selectchange(index, row) {
      //  this.status.unshift(row.manage_status)
      //  console.log('this.status',this.status)
      // console.log("row.manage_status", row.manage_status);
    },
    // 改变当前页改变当前页展示
    setCurrList(index) {
      this.currList = this.tableData.slice(
        (index - 1) * this.pageSize,
        index * this.pageSize
      );
    },
    // 改变当前页
    changePage(val) {
      this.currPage = val;
      this.setCurrList(val);
      console.log(val);
    },
    // 工作经历的删除
    del() {},
    //  模态框确定
    motaikuang(form) {
      this.dialogFormVisible = false;
      console.log("this.multipleSelection", this.multipleSelection);
      let newobj = {};
      for (let i = 0; i < this.multipleSelection.length; i++) {
        newobj.buildPeople = this.multipleSelection[i];
        this.tableData.unshift(newobj);
      }

      console.log("newobj", newobj);
      // this.tableData = this.tableData.concat(this.multipleSelection);
      console.log("this.tableData", this.tableData);
      this.setCurrList(1);
      // console.log("tableData", this.tableData);
    },
    // 模态框出现
    GZadd() {
      this.dialogFormVisible = true;
    },
    // 表格
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },
    // 返回
    back() {
      this.$router.push({
        name: "培训管理",
      });
    },
    // 提交
    submitForm(ruleForm) {
      console.log(this.ruleForm);
      this.$refs[ruleForm].validate((valid) => {
        console.log(this.tableData.people_id)
        // 6id
         let updPeopleIds=this.tableData.map((item,index,arr)=>{
             return item.people_id
         })
         console.log('updPeopleIds',updPeopleIds)
         // 成绩
         let scores=this.tableData.map((item,index,arr)=>{
             return  parseInt(item.manage_score)
         })
         console.log('scores',scores)
    // 状态
          let status=this.tableData.map((item,index,arr)=>{
             return  parseInt(item.manage_status)
         })
         console.log('status',status)
     // 新id
        let newPeopleIds=this.multipleSelection.map((item,index,arr)=>{
             return item.people_id
         })
          console.log('newPeopleIds',newPeopleIds)
          this.ruleForm.updPeopleIds=updPeopleIds
          this.ruleForm.newPeopleIds=newPeopleIds
          this.ruleForm.scores=scores
          this.ruleForm.status=status
          console.log('参数',this.ruleForm)
          // {
          //     train_id: "1",
          //     company_id: "1",
          //     level_id: "1",
          //     type_id: "3",
          //     train_title: "热是多久啊恢复健康舞他也",
          //     train_text: "开发的应该很快",
          //     train_remark: "测试",
          //     scores: [88, 88, 88, 88, 88],
          //     status: [0, 0, 0, 0, 0],
          //     updPeopleIds: [54, 55, 56, 59, 65],
          //     newPeopleIds: [65],
          //   }
     if (valid) {
          http
            .ryglpeiedit(this.ruleForm)
            .then((res) => {
              console.log("培训管理的编辑提交按钮", res);
            });
          // http.userAdd(this.ruleForm).then((res) => {
          //   console.log("新增", res);
          // });
          alert("成功");
          this.$router.push({
            name: "培训管理",
          });
        } else {
          // alert("注册失败");
          return false;
        }
      });
    },
  },
  mounted() {
    let trainid = {};
    trainid.train_id = this.ruleForm.train_id;
    console.log("train_id", trainid);
    http.ryglpeitableedit(trainid).then((res) => {
      this.tableData = res.data;
     
     
      this.setCurrList(1);
      console.log("培训编辑里的表格", this.tableData);
       console.log('this.tableData.people_id',this.tableData[0].people_id)
    });

    http.ryglpeiinput1({}).then((res) => {
      this.linput1 = res.data; // 培训种类
      console.log("add举办单位", res.data);
    });
    http.ryglpeiinput2({}).then((res) => {
      this.linput2 = res.data; // 培训种类
      console.log("add培训种类", res.data);
    });
    http.ryglpeiinput3({}).then((res) => {
      this.linput3 = res.data; // 培训种类
      console.log("add培训等级", res.data);
    });
    //人员管理培训培训人员里模态框左边表格
    http.ryglpeidiologleft({}).then((res) => {
      this.tableData1 = res.data; // 模态框左边表格
      console.log("模态框左边表格", res.data);
    });
  },
};
</script>
<style scoped>
.dialog {
  width: 100%;
  height: 500px;
  background: white;
  display: flex;
}
.dialog-left {
  width: 35%;
  height: 500px;
}
.dialog-right {
  width: 80%;
  height: 500px;
}
/* .table-input >>> .el-input >>> .el-input__inner {
  width: 50px !important;
} */

.table-input {
}
.el-button {
  height: 30px;
  padding: 7px 15px;
}
.textarea1 {
  height: 110px;
}
.el-input >>> .el-input__inner {
  width: 239px !important;
  height: 30px;
}
.el-select >>> .el-input__inner {
  width: 239px !important;
  height: 30px;
}
.input-padding{
   width: 50px !important;
}
.select-padding{
   width: 50px !important;
}
.el-form {
  /* margin-left: 20px; */
}
.el-row {
  /* width: 650px;  */
  /* height: 80px;  */
  /* margin-top: -2px;  */
  /* margin-top: 10px; */
  /* background: blanchedalmond; */
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 239px;
}
.el-col {
  /* width: 1150px; */
  height: 80px;

  /* border: 1px solid gray; */
}

.input-span {
  margin-right: 5px;
}
.add-input {
  width: 300px;
  margin-top: 15px;
  display: inline-block;
  margin-left: 10px;
}
.l-addrygl {
  margin-top: 20px;
  margin-left: 20px;
  /* width: 1200px; */
  height: 640px;
  background: #f1f1f1;
  overflow-y: scroll;
}
.l-addrygl-1 {
  /* position: fixed;
  top: 0; */
  font-size: 17px;
  color: #787878;
  width: 100%;
  height: 61px;
  background: white;
  display: flex;
  /* position: relative;  */
  justify-content: left;
  align-items: center;
}
.l-addrygl-back {
  cursor: pointer;
  margin-left: 10px;
}
.head-span {
  font-size: 17px;
  color: #222;
  font-weight: 700;
  margin-left: 20px;
}
.l-addrygl-2 {
  width: 100%;
  height: 650px;
  background: white;
  margin-top: 20px;
  padding-left: 20px;
}
.l-addrygl-2-1 {
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  border-bottom: 1px solid #f2f2f2;
  font-size: 17px;
  color: #222;
  font-weight: 700;
}
/* .l-addrygl-3-1 {
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  border: 1px solid #f2f2f2;
  font-size: 17px;
  color: #222;
  font-weight: 700;
}
.l-addrygl-3-2 {
  margin-left: 70px;
} */
.l-addrygl-3-1 {
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  border: 1px solid #f2f2f2;
  font-size: 17px;
  color: #222;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
}
.l-addrygl-3-1-right {
  color: #409eff;
  font-size: 14px;
  margin-right: 40px;
  cursor: pointer;
}
.dang {
  height: 40px;
  margin-top: 40px;
  /* margin-top: 40px; */
}

/* .l-addrygl-3 {
  width: 100%;
  height: 182px;
  padding-left: 20px;
  background: white;
  margin-top: 20px;
} */
.l-addrygl-3 {
  width: 100%;
  height: 300px;
  padding-left: 20px;
  background: white;
  margin-top: 20px;
}
.pei-edit-table {
  width: 98%;
}
.l-addrygl-5 {
  margin-top: 10px;
  font-size: 17px;
  color: #787878;
  width: 100%;
  height: 61px;
  background: white;
}
.l-fen {
  width: 100%;
  height: 60px;
  background: white;
}
.f-fenye {
  float: right;
  margin-top: 15px;
  margin-right: 15px;
}
.l-tijiao {
  width: 170px;
  height: 40px;
  float: right;
}
</style>